<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--网页通用导航栏-->
<header th:fragment="header">
        <nav id="nav">
            <div id="logo"><img th:src="@{/asserts/img/logo.png}" alt=""></div>
            <ul>
                <li th:class="${active=='index'?'active':''}"><a th:href="@{/toIndex}">首页</a></li>
                <li th:class="${active=='informations'?'active':''}"><a th:href="@{/toInformations}">旅游资讯</a></li>
                <li th:class="${active=='scenery'?'active':''}"><a th:href="@{/toScenery}">风景欣赏</a></li>
                <li th:class="${active=='query'?'active':''}"><a th:href="@{/toQuery}">景点查询</a></li>
                <li th:class="${active=='about'?'active':''}"><a th:href="@{/toAbout}">公司简介</a></li>
                <li th:class="${active=='comments'?'active':''}"><a th:href="@{/toComments}">留言板</a></li>
            </ul>
            <ul>
                <li th:if="${session.touristAccount} != null">
                    <span th:text="${'欢迎您：'+session.touristAccount.getAccountUsername()}"></span>
                    <a th:href="@{/touristLogout}" class="btn-primary btn-lg" style="z-index: 999;position: absolute;margin-left: 15rem;margin-top: -3.5rem;">注销</a>
                </li>
            </ul>
            <ul>
                <li th:if="${session.touristAccount} == null">
                    <a id="loginBtn" href="#" class="btn-lg btn-success" data-toggle="modal" data-target="#loginModal" style="color: white;margin-top: 13px;margin-left: 20px;">登录</a>
                </li>
            </ul>
        </nav>

            <!--模态登录框-->
            <div class="modal fade shadow-none p-3 mb-5 rounded" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">游客登录</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!--游客登录form-->
                            <form id="login_form">
                            <div class="form-group col-sm-10 offset-1">
                                <input name="username" type="text" class="form-control" placeholder="账号">
                            </div>

                            <div class="form-group col-sm-10 offset-1">
                               <input name="password" type="password" class="form-control" placeholder="密码">
                            </div>

                            <div class="modal-footer">
                                <!--注册-->
                                <span class="float-left"><a href="#" style="text-decoration:none" onclick="registerButtonOnClick()">还没有账号？</a></span>
                                <div style="color: red;margin: 0 auto;" id="loginTip"></div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="dismiss">返回</button>
                                <button type="button" class="btn btn-primary text-white" onclick="login()">登录</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


            <!--Modal注册框-->
            <div class="modal fade shadow-none p-3 mb-5 rounded" id="registerModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document" >
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">注册新用户</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" >
                            <!--注册表单-->
                            <form id="register_form">
                            <div class="form-group">
                                <input type="text" name="username" class="form-control" placeholder="账号" >
                            </div>

                            <div class="form-group">
                                <input type="password" name="password" class="form-control" placeholder="密码" >
                            </div>

                            <div class="form-group">
                                <input type="password" name="checkpassword" class="form-control" placeholder="确认密码">
                            </div>
                            <div class="modal-footer">
                                <div style="color: red;margin: 0 auto;" id="regTip"></div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
                                <button type="button" class="btn btn-primary" onclick="register()">注册</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>



    <script>
        <!--Modal框事件-->
        function registerButtonOnClick(){
            $('#loginModal').modal('hide');
            $('#registerModal').modal('show');
        }

        // 游客登录
        function login(){
            $.ajax({
                url:'/touristLogin',
                type:'post',
                dataType: "text",//预期服务器返回的数据类型
                data:$('#login_form').serialize(),
                success:function (result){
                    $("#loginTip").text(result);
                    if(result==='success'){
                        window.location.reload();
                    }
                }
            });
        }

        //游客注册
        function register(){
            $.ajax({
                url: '/touristAccountRegister',
                type: 'post',
                dataType: 'text',
                data: $('#register_form').serialize(),
                success:function (result){
                    $("#regTip").text(result);
                }
            })
        }
    </script>


</header>

<!--网页通用底部-->
<div th:fragment="footer">
    <footer id="footer">
        <div class="top">
            <div class="block left">
                <h3>合作伙伴</h3>
                <hr>
                <ul>
                    <li><a href="https://www.tuniu.com/">途牛旅游网</a></li>
                    <li><a href="http://www.lvmama.com/">驴妈妈旅游网</a></li>
                    <li><a href="https://hotels.ctrip.com/">携程旅游</a></li>
                    <li><a href="http://www.cdcyts.cn/">中国去青年旅行社</a></li>
                </ul>

            </div>
            <div class="block middle">
                <h3>旅游FAQ</h3>
                <hr>
                <ul>
                    <li><a href="https://www.baidu.com/s?wd=旅游合同签订方式">旅游合同签订方式</a>？</li>
                    <li><a href="https://www.baidu.com/s?wd=儿童价是基于什么制定的">儿童价是基于什么制定的</a>？</li>
                    <li><a href="https://www.baidu.com/s?wd=旅游的线路品质怎么界定的">旅游的线路品质怎么界定的</a>？</li>
                    <li><a href="https://www.baidu.com/s?wd=单房差是什么">单房差是什么</a>？</li>
                    <li><a href="https://www.baidu.com/s?wd=旅游保险有那些种类">旅游保险有那些种类</a>？</li>
                </ul>
            </div>
            <div class="block right">
                <h3>联系方式</h3>
                <hr>
                <ul>
                    <li>微博：weibo.com/lmx</li>
                    <li>邮件：lmxlmxlmx@lmx.com</li>
                    <li>地址：河南省郑州市郑州工商学院</li>
                </ul>
            </div>

        </div>
        <div class="bottom">Copyright © JIAOJI 皎骥旅游网| 苏ICP 备1201101** 号| 旅行社经营许可证：L-YC-BK12345 <a class="text-warning" th:href="@{/toLogin}"> 管理员登录</a></div>

        <!-- BootStrap运行组件 -->
        <script th:src="@{/asserts/js/jquery-3.5.1.js}"> </script>
        <script th:src="@{/asserts/js/bootstrap.min.js}"> </script>
        <script th:src="@{/asserts/js/popper.min.js}"> </script>
    </footer>
</div>

<!--旅游侧边栏-->
<aside class="sidebar" th:fragment="sidebar">
    <div class="recommend sidebox">
        <h3>景点推荐</h3>
        <div class="tag">
            <ul>
<!--                li标签里style="width控制了灰色区域的宽度-->
                <li th:each="attraction:${session.attractions}" style="width: 20rem"><a th:href="@{/toSceneryInfo/}+${attraction.getAttractionId()}" th:text="${attraction.getAttractionName()}">景点名称</a></li>
            </ul>
        </div>
    </div>


    <div class="treasure sidebox">
        <h3>旅游百宝箱</h3>
        <div class="box">
            <a href="http://tianqi.2345.com/" class="trea1">天气预报</a>
            <a href="https://www.12306.cn/index/" class="trea2">火车票查询</a>
            <a href="http://www.cdairport.com/flight.aspx?t=2" class="trea3">航空查询</a>
            <a href="https://dt.8684.cn/" class="trea4">地铁线路查询</a>
        </div>
    </div>

</aside>